<template>
  <div class="CDynamicForm">
    <n-form ref="formRef">
      <template v-for="item in value">
        <slot v-if="$slots[item.prop]" :backups="FormDataBackups" :name="item.prop" :data="item"></slot>
        <n-form-item v-else-if="item.type === 'input'" :label="item.label" :path="item.prop">
          <n-input v-model:value="item.value" :placeholder="'请输入' + item.label" />
        </n-form-item>
        <n-form-item v-else-if="item.type === 'select'" :label="item.label" :path="item.prop">
          <n-select v-model:value="item.value" :options="item.options" :placeholder="'请选择' + item.label">
          </n-select>
        </n-form-item>
        <n-form-item v-else-if="item.type === 'switch'" :label="item.label" :path="item.prop">
          <n-switch v-model:value="item.value" />
        </n-form-item>
        <n-form-item v-else-if="item.type === 'image'" :label="item.label" :path="item.prop">
          <c-upload-image v-model:file-list="item.value" :max="item.max"></c-upload-image>
        </n-form-item>
        <n-form-item v-else-if="item.type === 'json'" :label="item.label" :path="item.prop">
          <c-upload-json v-model:file-list="item.value" :max="item.max"></c-upload-json>
        </n-form-item>
      </template>
    </n-form>
  </div>
</template>

<script setup lang='ts'>
const value = defineModel<Record<string, FormTemplate>>('value')

const FormDataBackups = defineModel<Record<string, string>>('FormDataBackups')
const addBackupForm = (key: string) => {
  FormDataBackups.value![key] = JSON.stringify(value.value)
}
const deleteBackupForm = (key: string) => {
  delete FormDataBackups.value![key]
}
defineExpose({
  addBackupForm,
  deleteBackupForm,
  FormDataBackups
})
</script>